<template>
  <el-tabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
  >
    <el-tab-pane label="水质数据" name="first">
      <Assay></Assay>
    </el-tab-pane>
    <el-tab-pane label="工艺数据" name="second">
      <xingshaProcessdata
        @typeUnitChange="typeUnitChange"
        v-if="currentTypeUnit == '1' || currentTypeUnit == '2'"
      >
      </xingshaProcessdata>
      <northProcessdata
        @typeUnitChange="typeUnitChange"
        v-if="currentTypeUnit == '4'"
      ></northProcessdata>
      <southProcessdata
        @typeUnitChange="typeUnitChange"
        v-if="currentTypeUnit == '5'"
      ></southProcessdata>
      <westProcessdata
        @typeUnitChange="typeUnitChange"
        v-if="currentTypeUnit == '3'"
      ></westProcessdata>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref } from "vue";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import Assay from "./assay.vue";
import xingshaProcessdata from "./xingshaProcessdata.vue";
import northProcessdata from "./northProcessdata.vue";
import southProcessdata from "./southProcessdata.vue";
import westProcessdata from "./westProcessdata.vue";
const localTypeUnit = ref(Storage.localGet("depId"));
const currentTypeUnit = ref(Storage.localGet("depId"));

const activeName = ref("first");

const handleClick = (tab, event) => {
  console.log(tab, event);
};

const typeUnitChange = (params) => {
  console.log(params);
  currentTypeUnit.value = params;
};
</script>

<style scoped lang="less"></style>
